<template>
  <div
    class="hotBox"
    :class="{
      darkW: themeRef.state.themeState == 'drak',
      lightW: themeRef.state.themeState == 'light',
    }"
  >
    <div class="hotBoxContent">
      <div class="Left">
        <el-affix :offset="70">
          <LeftSidebar :dataMenu="LeftSidebarObjRef" />
        </el-affix>
      </div>
      <div class="Content">
        <router-view />
      </div>
      <div class="Right">
        <el-affix :offset="70">
          <RightSidebar :renderArr="RigthSidebarObjRef" />
        </el-affix>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import LeftSidebar from "../../components/LeftSidebar/LeftSidebar.vue";
import ins from "../../utils/Axios";
import RightSidebar from "../../components/RightSidebar/RightSidebar.vue";
@Options({
  components: {
    LeftSidebar,
    RightSidebar,
  },

  mounted() {
    ins
      .get("/user/getHotUser", {
        params: {
          page: 1,
          limit: 5,
        },
      })
      .then((res: any) => {
        this.RigthSidebarObjRef = res.data.data;
      })
      .catch((err: any) => {
        ElMessage.error("模块网络请求超时请刷新后重试！");
      });
  },
})
export default class Hot extends Vue {
  themeRef: any = useStore();
  //渲染
  LeftSidebarObjRef = {
    title: "热门",
    menu: [
      {
        id: 0,
        text: "热门博文",
        icon: "icon-hot1",
        link: "/Hot",
      },
      {
        id: 1,
        text: "热门搜索",
        icon: "icon-search",
        link: "/Hot/newBlog",
      },
      {
        id: 2,
        text: "热门话题",
        icon: "icon-reloadtime",
        link: "/Hot/searchBlog",
      },
    ],
  };
  //右侧栏数据
  RigthSidebarObjRef = null;
}
</script>

<style lang="less" scoped>
@import url("../../assets/less/global.less");
@import url("../../assets/less/hot.less");
</style>